<template>
  <el-menu
    :default-active="getActiveName"
    router
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item>
      <h2 class="logo">Delusion的个人博客</h2>
    </el-menu-item>
    <el-menu-item index="index">
      <i class="el-icon-s-home"></i>首页
    </el-menu-item>
    <el-menu-item index="article">
      <i class="el-icon-document"></i>文章列表</el-menu-item
    >
    <el-menu-item index="userInfo">
      <i class="el-icon-s-custom"></i>个人简历</el-menu-item
    >
    <el-menu-item index="contact">
      <i class="el-icon-s-comment"></i>联系我们</el-menu-item
    >
    <el-input
      placeholder="请输入内容"
      v-model="searchWord"
      type="text"
      maxlength="30"
      clearable
      suffix-icon="el-icon-search"
      class="input-with-select"
      style="max-width: 15%"
    >
    </el-input>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      searchWord: "",
    };
  },
  computed: {
    getActiveName() {
      return this.$store.state.activeMenuName;
    },
  },
  watch: {
    getActiveName(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
  },
  methods: {
    handleSelect(e) {
      this.$store.commit("updateActiveMenuName", e);
    },
  },
};
</script>

<style>
</style>